﻿<!DOCTYPE html>
<html>
<head>
    <meta />
    <script src="js/vue.js">
    </script>
    <script src="js/learn_vue.js">
    </script>
    <script>
        //学习mvvm框架vue ===> Class 与 Style 绑定:绑定内联样式 2016年9月18日11:07:52
        var args = {el:"#app",
            data:{
                message:"Hello vue js",
                msg:"Yes,or,No",
                ok:true,
                num:10,
                url:"https://www.baidu.com",
                name:"app",
                clsObj:{ //对象语法设置class属性的值,当为true时 该值的key为class属性值的class名
                    clsA:true, //属性名就是css样式表名
                    clsB:false,                    
                },
                clsObj2:{ //对象语法设置class属性的值,当为true时 该值的key为class属性值的class名
                    clsA:false, //属性名就是css样式表名
                    clsB:true,                    
                },
                myStyleA:"myClsA",
                myStyleB:"myClsB",
                //内联样式,注意css属性名需要驼峰式
                styleObj:{width:"200px",height:'50px',color:"#000000",fontSize:"14px",backgroundColor:"#f6c87b"},

            },
            //app内所有通过指令调用的方法都定义在这里
            methods: {
                clickBtn: function (event) {
                  // 方法内 `this` 指向 vm 即系 data属性
                  //alert('Hello ' + this.name + '!');
                  // `event` 是原生 DOM 事件
                  //alert(event.target.tagName);
                  this.message = "data is change!"; //数据改变，视图会立刻更新显示
                  this.myAddress = "zhanJiang GD";
                  //alert("this.myAddress="+this.myAddress);
                }
            },   
            computed:{ //计算vm的属性,其实就是为vm设置多个getter属性
                name_als:function (){return this.name+"_als"}, //这样vm就具有一个getter属性name_als
                //为一个属性设置getter和setter
                myAddress:{
                    get:function (){return "lianJiang GD"},
                    set:function (val){
                        //alert("set myAddress=="+val);                        
                    },
                }    
                               
            }
        
        };
        
        var items=[
            {desc:"信息1",msg:"foo"},
            {desc:"信息2",msg:"bar"},        
        ];
        args.data.items = items;
        
        window.onload = function (){            
            
            var vm=new Vue(args);//id为app的元素数据设置数据,
            
            //监听数据改变的,这里是监听 message 数据
            vm.$watch('message',function (newVal,oldVal){
                alert("oldVal="+oldVal);
                alert("newVal="+newVal);
            });
            
        }
        
        function onclickBtn()
        {            
            args.data.message = "data is change!"; //数据改变，视图会立刻更新显示
        }
        
    </script>
    <style>
        .clsA{
            color:#FF0000;
            background-color:#cccccc;
            width:768px;
            height:500px;
            box-shadow:0px 2px 15px #fff000;
            margin:0 auto;
            
        }
        .clsB{
            color:#00FF00;
        
        }
        
        .myClsA{           
            background-color:#000000;
            width:200px;
            height:50px;
            
        }
        .myClsB{
            color:#fff000;       
           
        }
        
    </style>
    
    
</head>


<body>
    <div id="app" v-bind:class="clsObj" > <!--绑定class属性-->
        message:{{message}} <br><!--定义模板变量-->        
        <!--模板表达式:全支持js的表达式，但是模板内只能有一个表达式,注意是表达式不能是程序语句 if for while switch 这些是语句-->
        num:{{num+1}}<br>
        ok:{{ ok ? 'YES' : 'NO' }}<br><!--三目运算-->
        name_als:{{ name_als }}<br>
        msg:{{ msg.split(',').reverse().join('-')  }}<br>    <!--管道运算 添加过滤器-->    
        <input v-model="message" ></input>
        <a v-bind:href="url" >百度1</a> <!--通过指令参数 设置标签的href属性和viewmodel的url属性绑定-->
        <a :href="url" >百度2</a> <!--指令v-bind的缩写语法-->        
        <button v-on:click="clickBtn">点我啊</button> <!-- v-on事件指令(注意指令执行的函数需要在vm里面定义) 这里是添加点击事件-->
        <button @click="clickBtn">再点</button> <!-- v-on事件指令的缩写-->
        <div v-bind:class="[myStyleA,myStyleB]"> <!--绑定class属性的数组语法 -->
            <p>啦啦啦，这是绑定class属性的数组语法</p>
        </div> 
        <div v-bind:class="[myStyleA,clsObj2]"> <!--绑定class属性的对象语法和数组语法结合-->
            <p>绑定class属性的对象语法和数组语法结合</p>
        </div> 
        <div v-bind:style="styleObj" >绑定内联样式</div>
        <!--属性ok如果值为true 则显示该div;v-if指令控制多个元素 
        v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
        因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。 -->
        <div v-if="ok">这是v-if v-else v-show等条件渲染</div>
        <template v-if="ok">
            <h1>哈哈哈</h1>
            <h2>嘻嘻嘻</h2>
        </template>
        <div>        
            <ul >
              v-for循环指令
              <template v-for="(index,item) in items">
                <li>{{ item.msg }}</li>
                <li class="divider">{{ item.desc }}</li>
              </template>
            </ul>
            <!-- v-for指令遍历obj-->
            <div v-for="(key,val) in clsObj">
                {{key}}:{{val}}
            </div>
            <!-- v-for指令模拟循环次数-->
            <div v-for="n in 5">
                <span>{{n}}</span> <!--这样可以创建多个标签-->
            </div>
        </div>
        
    </div>
    
    
</body>



</html>